<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<canvas id="zoom" width="400" height="400"></canvas>
<div id="color" style="width: 10px; height: 10px;"></div>
<script>

  var canvas = document.getElementById("canvas");
  var d = canvas.width;
  ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(d / 2, 0);
  ctx.lineTo(d, d);
  ctx.lineTo(0, d);
  ctx.closePath();
  ctx.fillStyle = "yellow";
  ctx.fill();

  function blobCallback(iconName) {
    return function(b) {
      var a = document.createElement("a");
      a.textContent = "Download";
      document.body.appendChild(a);
      a.style.display = "block";
      a.download = iconName + ".ico";
      a.href = window.URL.createObjectURL(b);
    }
  }
  canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
    '-moz-parse-options:format=bmp;bpp=32');


</script>
</body>
</html>